<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>combine background-image and gradient</title>
	<style type="text/css">
		div,p,dl,dd,a,b,h1,h2,h3,h4,em,section,label,span,td,li,nav,footer,body,ul,i{
			-webkit-tap-highlight-color:rgba(0,0,0,0);
			word-wrap:break-word;
			word-break:break-all;
			padding:0;
			margin:0;
			-webkit-backface-visibility: hidden;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.first, .second, .third {
			background: orange;
			height: 500px;
		}
		.second {
			background: red;
		}
		.third {
			background: orange;
		}
		p {
			height: 494px;
		}
		.more:before{
			content: "";
			display: block;
			background-size: 12px 6px;
			left:0;
			right: 0;
			height: 6px;
			background-image:
			
		}
		.first .more:before {
			background-image: -webkit-gradient(linear,50% 0,0 100%,
				from(transparent),
				color-stop(.5,transparent),
				color-stop(.5, red),
				to(red)
				),
			-webkit-gradient(linear,50% 0,100% 100%,
				from(transparent),
				color-stop(.5,transparent),
				color-stop(.5,red),
				to(red)
			);
		}
		.second .more:before {
			background-image: -webkit-gradient(linear,50% 0,0 100%,
				from(transparent),
				color-stop(.5,transparent),
				color-stop(.5, orange),
				to(orange)
			),
			-webkit-gradient(linear,50% 0,100% 100%,
				from(transparent),
				color-stop(.5,transparent),
				color-stop(.5,orange),
				to(orange)
			);
		}
	</style>
</head>
<body>
	<div class="first">
		<p>第一页</p>
		<div class="more"></div>
	</div>
	<div class="second">
		<p>第二页</p>
		<div class="more"></div>
	</div>
	<div class="third">
		<p>第三页</p>
		<div class="more"></div>
	</div>
</body>
</html>